<template>
    <div>
        <h2>Login Account</h2>
        <el-form label-width="60px" :rules="rules" :model="account" ref="formRef">
            <el-form-item label="账号" prop="name">
                <el-input v-model="account.name"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="account.password" type="password" autocomplete="off"/>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import{ useStore} from 'vuex'
import {rules} from './account-config'
import { ElForm } from 'element-plus'
import localCache from '@/utils/cache'

export default defineComponent({
    setup () {
        const store = useStore()
        const account = reactive({
            name:localCache.getCache('name')??'',
            password:localCache.getCache('pass')??''
        })
        const formRef = ref<InstanceType<typeof ElForm>>()
        //const formRef = ref()

        const loginAction = ()=>{
            formRef.value?.validate((valid)=>{
                console.log("loginAction登录",account, valid)
                if(valid){
                    localCache.setCache('name',account.name)
                    localCache.setCache('pass',account.password)

                    store.dispatch('login/accountLoginAction',{...account})


                }
                else{
                    localCache.deleteCache('name')
                    localCache.deleteCache('pass')
                }
            })
            // formRef.value?.validate((valid:boolean)=>{
            //     console.log("loginAction登录",account, valid)
            // })

        }
        return {
            account,
            rules,
            loginAction, 
            formRef
        }
    },

})
</script>

<style scoped>

</style>